<template>
	<view>
		<u--form ref="ruleFormRef" style="padding: 0 10px;" :model="forms" label-position="top" :rules="rules"
			label-width="120px" class="demo-ruleForm">
			<u-form-item  prop="phone" class="el-form-item-login">
				<u-input  v-model="forms.phone" class="el-input-login"
					placeholder="请输入新手机号"></u-input>
			</u-form-item>
			<u-form-item prop="code" class="u-form-item-login">
				<u-input v-model="forms.code"  placeholder="请输入验证码">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</u-form-item>
			<!-- <el-form-item label="验证码" prop="code" class="el-form-item-login">
				<view class="input-s-div">
					<el-input prefix-icon="el-icon-s-goods" v-model="forms.code" class="input-s el-input-login"
						placeholder="请输入验证码">
						<el-button type="primary"
							style="height: 30px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"
							slot="suffix" v-show="show" @click="getYan('ruleFormRef')">{{ text
		                                }}</el-button>
						<el-button type="primary"
							style="height: 30px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"
							slot="suffix" v-show="!show">{{ count }}s</el-button>
					</el-input>
				</view>
			</el-form-item> -->
			<u-form-item  prop="password" class="el-form-item-login">
				<u-input  v-model="forms.password" class="el-input-login"
					placeholder="请输入登陆密码" show-password></u-input>
			</u-form-item>
			<u-form-item  prop="passwords" class="el-form-item-login">
				<u-input  v-model="forms.passwords" class="el-input-login"
					placeholder="请在次输入密码" show-password></u-input>
			</u-form-item>
			<view class="flex jcsb">
				<u-button @click="handleClose()" style="width: 40%;">返回</u-button>
				<u-button type="primary" @click="resects('ruleFormRef')" style="width: 50%;">
					确定
				</u-button>
			</view>
		</u--form>

	</view>
</template>

<script>
	import {
		get_reg_sms,
		resetPhonenumber,
	} from "@/api/my.js"
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			}
			return {
				upLoadImages: {
					tip: "请上传1寸照，文件大小不超过2M，支持jpg、jpeg、png格式",
					url: "",
				},
				show: true,
				text: '获取验证码',
				type: 0,
				count: 60,
				input: "",
				form: {
					password: "",
					code: "",
					phone: "",
					oldPassword: "",
					passwords: "",
					email: ""
				},
				forms: {
					password: "",
					code: "",
					phone: "",
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					email: [{
						type: "email",
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
					// phone: [{
					//     required: true,
					//     message: '请输入手机号',
					//     trigger: 'blur'
					// }, {
					//     validator: checkPhone,
					//     trigger: "blur"
					// }],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					// code: [{
					//     required: true,
					//     message: '请输入验证码',
					//     trigger: 'blur'
					// }],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
				},
				indexValue: 0,
				phoneBool: false,
				loading: false,
				tips: '',
				value: '',
			}
		},
		
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$refs.ruleFormRef.validateField("phone", (res) => {
					console.log(res);
					if(res.length==0&&this.forms.phone){
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
								let obj = {
									phonenumber: this.forms.phone
								}
								get_reg_sms(obj).then(res => {
									console.log(res.msg);
									if (res.code == 200) {
										uni.$u.toast('验证码已发送');
									} else {
										uni.$u.toast( res.msg);
									}
								
								})
							}, 1000);
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					} else {
						uni.$u.toast('请输入手机号');
					}
				})
				
			},
			change(e) {
				console.log('change', e);
			},
			handleClose() {
				uni.navigateBack()
			},
			getYan(formName) {
				this.$refs[formName].validateField("phone", (res) => {
					console.log(res);
					if (!res) {
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									this.text = "重新获取"
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
						console.log("进来了");
						let obj = {
							phonenumber: this.forms.phone
						}
						get_reg_sms(obj).then(res => {
							console.log(res.msg);
							if (res.code == 200) {
								this.$message({
									message: `${res.msg}`,
									type: 'success',
									center: true,
									offset: 0.1
								});
							} else {
								this.$message({
									message: `${res.msg}`,
									type: 'error',
									center: true,
									offset: 0.1
								});
							}

						})
					} else {

					}

				})
			},
			resects(formName) {
				var userInfoData_ =uni.getStorageSync("userInfoData_")
				this.$refs.ruleFormRef.validate().then(res => {
					if (this.forms.password != this.forms.passwords) {
						uni.showToast({
							title: "两次密码不一致",
							icon: 'error'
						})
						return
					}
					let params = {
						"clientId":userInfoData_ ? userInfoData_.client_id : "eeb9377d4b6debbc0a6e8756bbbbb4c7",
						"grantType": "phonePassword",
						"tenantId": "000001",
						"password": this.forms.password,
						"phonenumber": this.forms.phone,
						"smsCode": this.forms.code,
						"userType": "application_user"
					}
					resetPhonenumber(params).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						
					}).catch((res => {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}))
					
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})


			},
		}
	}
</script>

<style lang="scss">

</style>
